import { ajax, tools } from '../../js/ajax.js';

//#region 信息弹出层的部分
let divToast = document.getElementById('divToast');
// querySelector是通过css选择器获取页面元素（只会返回一个）
let toastBody = document.querySelector('#divToast .toast-body');
// 创建toast对象
const toast = new bootstrap.Toast(divToast);

// 显示toast对话框
function showToast(message) {
  // 修改内容
  toastBody.innerHTML = message;
  // 显示
  toast.show();
}

//#endregion

//#region 添加的部分
let txt_title = document.getElementById('txt_title');
let txt_info = document.getElementById('txt_info');
let btnAdd = document.getElementById('btnAdd');

btnAdd.addEventListener('click', () => {
  ajax.post(
    '/user/note/add',
    {
      title: txt_title.value,
      info: txt_info.value,
    },
    (data) => {
      showToast(data.message);
    }
  );
});

//#endregion

//#region 查询的部分
let tbdata = document.getElementById('tbdata');
let txt_a_info = document.getElementById('txt_a_info');
let txt_a_title = document.getElementById('txt_a_title');
let btnQuery = document.getElementById('btnQuery');
let btnReset = document.getElementById('btnReset');
btnReset.addEventListener('click', () => {
  txt_a_title.value = '';
  txt_a_info.value = '';
  page.pageNumber = 1;
  query();
});

// 分页信息
let page = {
  pageNumber: 1,
  pageSize: 7,
};
// 查询条件
let queryInfo = {
  info: '',
  title: '',
};
// 记事本的数据
let list = [];

btnQuery.addEventListener('click', () => {
  page.pageNumber = 1;
  query();
});

// 查询的方法
function query() {
  // 查询条件的赋值
  queryInfo.info = txt_a_info.value;
  queryInfo.title = txt_a_title.value;

  ajax.post('/user/note/queryAll', tools.mergeJson(page, queryInfo), (data) => {
    if (data.success) {
      list = data.list;
      page = data.page;
      showData();
      showPage();
    } else {
      showToast(data.message);
    }
  });
}

function showData() {
  tbdata.innerHTML = '';

  for (let i = 0; i < list.length; i++) {
    let info = list[i];
    let tr = document.createElement('tr');
    let td;
    // 标题
    td = document.createElement('td');
    td.append(info.title);
    tr.append(td);
    // 内容
    td = document.createElement('td');
    td.append(info.info);
    tr.append(td);
    // 信息最后修改时间
    td = document.createElement('td');
    td.append(tools.formatDate(info.lastupdate));
    tr.append(td);
    // 操作的部分
    td = document.createElement('td');
    // 修改的按钮
    let btn01 = document.createElement('button');
    btn01.append('修改');
    btn01.classList.add('btn', 'btn-primary', 'btn-sm');
    btn01.addEventListener('click', () => {
      showModify(info);
    });

    td.append(btn01);
    // 删除的按钮
    let btn02 = document.createElement('button');
    btn02.append('删除');
    btn02.classList.add('btn', 'btn-danger', 'btn-sm', 'ms-1');
    btn02.addEventListener('click', () => {
      showDel(info);
    });

    td.append(btn02);

    tr.append(td);

    tbdata.append(tr);
  }
}

// 分页的处理
// querySelectorAll表示获取对应css选择器的元素(多个，返回值是数组)
let elePages = document.querySelectorAll('a.page-link');
console.log('分页相关a元素：', elePages);

// 显示分页信息
function showPage() {
  elePages[1].innerHTML = `
当前页/总页数/记录数:
${page.pageNumber}/${page.pageCount}/${page.total}
  `;
}

// 下一页
elePages[2].addEventListener('click', () => {
  page.pageNumber++;
  if (page.pageNumber > page.pageCount) {
    page.pageNumber = page.pageCount;
    return;
  }
  query();
});

// 上一页
elePages[0].addEventListener('click', () => {
  page.pageNumber--;
  if (page.pageNumber < 1) {
    page.pageNumber = 1;
    return;
  }
  query();
});

query();

//#endregion

//#region 对话框事件处理
let addDialog = document.getElementById('addDialog');
// 关闭添加对话框之后要重新查询数据
addDialog.addEventListener('hidden.bs.modal', () => {
  page.pageNumber = 1;
  query();
});

let modifyDialog = document.getElementById('modifyDialog');
modifyDialog.addEventListener('hidden.bs.modal', () => {
  page.pageNumber = 1;
  query();
});

//#endregion

//#region 修改的部分
// 要修改的对象
let modifyInfo = {};

let txt_mtitle = document.getElementById('txt_mtitle');
let txt_minfo = document.getElementById('txt_minfo');
let btnModify = document.getElementById('btnModify');
// 修改对话框对象
let mdialog = new bootstrap.Modal(modifyDialog);

function showModify(info) {
  modifyInfo = info;
  console.log('要修改的对象：', modifyInfo);
  txt_mtitle.value = modifyInfo.title;
  txt_minfo.value = modifyInfo.info;

  mdialog.show();
}
btnModify.addEventListener('click', () => {
  modifyInfo.title = txt_mtitle.value;
  modifyInfo.info = txt_minfo.value;

  ajax.post('/user/note/update', modifyInfo, (data) => {
    showToast(data.message);
  });
});

//#endregion

//#region 删除的部分
let delDialog = document.getElementById('delDialog');
let btnDel = document.getElementById('btnDel');

let delbody = document.querySelector('#delDialog .modal-body');
let ddialog = new bootstrap.Modal(delDialog);

// 要删除的id
let delId = 0;

function showDel(info) {
  console.log('要删除的对象：', info);
  delId = info.unid;
  delbody.innerHTML = `确定要删除:${info.title}？`;
  ddialog.show();
}

btnDel.addEventListener('click', () => {
  ajax.post('/user/note/delete', { unid: delId }, (data) => {
    showToast(data.message);
    ddialog.hide();
    page.pageNumber = 1;
    query();
  });
});

//#endregion

// 作业（重要）
// 按照上课的记事本的进度同步完成联系人的功能
